<template>
  <div class="interfaceDetail">
    <span class="interface-title">{{this.$route.query.name}}接口详情</span>
    <el-form ref="form"
             label-width="auto"
             :model="interfaceData">
      <el-row class="interfaceDetail-top">

        <el-col class="button-flex"
                :xs="{ span: 24 }"
                :sm="{ span: 18 }"
                :md="{ span: 12 }"
                :lg="{ span: 12 }">
          <el-button @click="back">返回</el-button>
          <el-button class="search-btn"
                     @click="setProviderDialog = true"
                     type="primary">供应商设置</el-button>
          <el-button type="primary"
                     @click="setAbnormalDialog=true">异常阈值设置
          </el-button>
        </el-col>
        <el-col class="flex-end button-flex"
                :xs="{ span: 24}"
                :sm="{ span: 12}"
                :md="{ span: 12}"
                :lg="{ span: 12}">
          <el-select v-model="interfaceValue"
                     clearable
                     @clear="selectAll"
                     @change="selectedDetail"
                     placeholder="请选择">
            <el-option v-for="item in providerList"
                       :key="item.access_id"
                       :label="item.access_name"
                       :value="item.access_id">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="{ span: 24 }"
                :sm="{ span: 12 }"
                :lg="{ span: 12 }"
                :md="{ span: 12 }">
          <el-form-item label="供应商名称"
                        prop="name">
            <el-input v-model="interfaceData.supplier"
                      :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="{ span: 24 }"
                :sm="{ span: 6 }"
                :lg="{ span: 6 }"
                :md="{ span: 6 }">
          <el-form-item label="联系人"
                        prop="people">
            <el-input v-model="interfaceData.name"
                      :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="{ span: 24 }"
                :sm="{ span: 6 }"
                :lg="{ span: 6 }"
                :md="{ span: 6 }">
          <el-form-item label="联系电话"
                        prop="phone">
            <el-input v-model="interfaceData.phone"
                      :disabled="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="{ span: 24 }"
                :sm="{ span: 18 }"
                :lg="{ span: 18 }"
                :md="{ span: 18 }">
          <el-form-item label="备注"
                        prop="remark">
            <el-input v-model="interfaceData.remark"
                      :disabled="true"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="interfacelist-form">
      <el-row class="interfacelist-mid">
        <el-col :span="24"
                class="table-col">
          <el-table :highlight-current-row="true"
                    border
                    :header-cell-style="{ background: '#f5f5f5' }"
                    :data="interfaceList.list">
            <el-table-column type="index"
                             label="序号"
                             sortable
                             align="center"
                             :sort-method="sortNo"
                             width="100"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="api_name"
                             label="接口名称"
                             align="center"
                             show-overflow-tooltip>
              <template slot-scope="scope">
                <p class="apiList"
                   @click="apiDetail(scope.row)">{{scope.row.api_name}}</p>
              </template>
            </el-table-column>
            <el-table-column label="今日被调用次数"
                             prop="called_num"
                             align="center">
            </el-table-column>
            <el-table-column label="今日接口接收次数"
                             show-overflow-tooltip
                             prop="receive_num"
                             align="center">
            </el-table-column>
            <el-table-column label="最近一次接收时间"
                             show-overflow-tooltip
                             prop="req_date"
                             align="center">
            </el-table-column>
            <el-table-column prop="api_status"
                             label="状态"
                             align="center"
                             show-overflow-tooltip>
              <template slot-scope="scope">
                <p :style="scope.row.api_status==='1'?'color: #000;':'color: #ff0000'">{{scope.row.api_status ==='1'?'正常':'异常' }}</p>
              </template>
            </el-table-column>
            <el-table-column label="项目"
                             width="200px"
                             align="center">
              <template slot-scope="scope">
                <el-button @click="getDetail(scope.row)"
                           type="text">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-col :span="24"
                  style="margin-top:20px!important;">
            <el-pagination @current-change="handlePageChange"
                           @size-change="handleSizeChange"
                           :current-page="requestParam.page"
                           :page-size="requestParam.page_size"
                           layout="total,sizes,prev, pager, next, jumper"
                           background
                           :total="interfaceList.total_count"
                           align="center">
            </el-pagination>
          </el-col>
        </el-col>
      </el-row>
    </div>
    <div class="abnormalMessage"
         v-if="showAbnormal">
      <div class="message-nav">
        <span>异常信息</span>
        <!-- <span class="line"></span> -->
      </div>
      <div class="message-con">
        <p class="message"
           v-for="(item,api_id) in abnormalList.list"
           :key="api_id">{{item.req_date}}-{{abnormalType ===1?'接口被调用成功':'接口接收成功'}}-{{item.result==='1'?'正常':'异常'}}</p>
      </div>
      <el-pagination class="apiPage"
                     small
                     layout="prev, pager, next"
                     @current-change="apiChange"
                     :total="abnormalList.total_count">
      </el-pagination>
    </div>
    <!-- 供应商设置弹窗 -->
    <el-dialog :visible.sync="setProviderDialog"
               title="供应商设置">
      <el-form ref="setProviderform"
               :rules="providerRules"
               :model="interfaceData"
               label-width="100px">
        <el-form-item label="供应商名称"
                      prop="supplier">
          <el-input v-model="interfaceData.supplier"
                    placeholder="请输入供应商名称"></el-input>
        </el-form-item>
        <el-form-item label="联系人"
                      prop="name">
          <el-input v-model="interfaceData.name"
                    placeholder="请输入联系人"></el-input>
        </el-form-item>
        <el-form-item label="联系电话"
                      prop="phone">
          <el-input v-model.number="interfaceData.phone"
                    placeholder="请输入联系电话"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea"
                    v-model="interfaceData.remark"
                    placeholder="请输入备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="ProviderDialog">取 消</el-button>
        <el-button @click="saveProvider"
                   type="primary">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 异常阈值设置弹窗 -->
    <el-dialog :visible.sync="setAbnormalDialog"
               title="异常阈值设置">
      <div class="abnormal-con">
        <span class="abnormal-left">调取接口后超过</span>
        <el-input class="abnormal-input"
                  v-model="abnormalVal"></el-input>
        <span class="abnormal-right">分钟后未接收到数据推送时，判定为异常</span>
      </div>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="setAbnormalDialog = false">取 消</el-button>
        <el-button @click="saveAbnormal"
                   type="primary">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 详情 -->
    <el-dialog :visible.sync="interfaceDetailDialog"
               title="详情">
      <el-table :data="setAbnormalData.list"
                border
                style="width: 100%">
        <el-table-column type="index"
                         label="序号"
                         sortable
                         align="center"
                         :sort-method="sortAbnormal"
                         width="100"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="project_no"
                         label="项目编码">
        </el-table-column>
        <el-table-column prop="project_name"
                         label="项目名称">
        </el-table-column>
      </el-table>
      <el-col :span="24"
              style="margin-top:20px!important;">
        <el-pagination layout="prev, pager, next"
                       @current-change="detailchange"
                       :current-page="detailPage.page"
                       :total="setAbnormalData.total_count">
        </el-pagination>
      </el-col>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="interfaceDetailDialog = false">返 回</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { InterfaceListApi } from "@/services/ProjectCenter";

export default {
  data () {
    var validatePhone = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号码'))
      } {
        const phoneRegex = /^1[34578]\d{9}$/
        if (!phoneRegex.test(value)) {
          callback(new Error('手机号码格式不正确！'))
        } else {
          callback()
        }
      }
    };
    return {
      interfaceData: {
        name: '',
        supplier: '',
        remark: '',
        phone: '',
      },
      interfaceList: {  //表格列表
        list: [],
        total: 0,
        total_count: 0
      },
      project_id: '',
      requestParam: { //列表分页
        is_page: 1,
        page: 1,
        page_size: 10,
      },
      apiPage: { //api异常信息分页
        is_page: 1,
        page: 1,
        page_size: 10,
      },
      detailPage: { //详情分页
        is_page: 1,
        page: 1,
        page_size: 10,
      },
      providerList: [], //供应商列表
      setAbnormalData: {
        list: [],
        total: 0,
        total_count: 10
      },
      providerRules: {
        name: [{ required: true, message: '请输入供应商名称', trigger: 'change' }],
        people: [{ required: true, message: '请输入联系人', trigger: 'change' }],
        phone: [{ required: true, validator: validatePhone, trigger: 'blur' }]
      },
      abnormalList: {
        list: [],
        total: 0,
        total_count: 10
      },
      showAbnormal: false,
      abnormalType: '',
      uniqueId: '',
      arrFilter: [], //供应商详情
      accessId: '',
      abnormalVal: '',
      interfaceValue: '',
      setProviderDialog: false,
      setAbnormalDialog: false,
      interfaceDetailDialog: false,
      interfaceMap: {}
    }
  },
  computed: {
  },
  watch: {
    '$store.state.choosedProject': function (val) {
      this.choosedProject = val
      this.project_id = val.project_id
      this.requestParam.page = 1
    }
  },
  created () {
    this.getProviderList()
    this.getAbnormalVal()

    let store = this.$store.state.choosedProject
    let local = window.localStorage.getItem('choosedProject') || '{}'
    this.choosedProject = store.project_id ? store : JSON.parse(local)
    this.project_id = this.choosedProject.project_id
  },
  mounted () {
    this.getInterfaceDetail()
  },
  methods: {
    //获取接口详情
    getInterfaceDetail () {
      let param = { sort_no: this.$route.query.sortId, access_id: this.accessId ? this.accessId : '', ...this.requestParam }
      InterfaceListApi.getInterfaceDetail({
        params: param
      }).then(
        res => {
          // console.log(res, '页面详情');
          if (res.code === 0) {
            this.interfaceList = res.data;
          }
        },
        err => {
          console.log(err);
        }
      );
    },
    //列表分页
    handlePageChange (page) {
      // console.log(`当前页: ${page}`);
      this.requestParam.page = page;
      this.getInterfaceDetail();
    },
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`);
      this.requestParam.page_size = val;
      this.getInterfaceDetail();
    },
    // 表格排序
    sortNo () { },
    //供应商列表选择器选中
    selectedDetail (val) {
      this.accessId = val
      this.showAbnormal = false
      if (val) {
        this.interfaceData = this.interfaceMap[val]
        this.getInterfaceDetail()
      }
      // console.log(this.interfaceData, '333')
    },
    //选择框清空
    selectAll () {
      this.getInterfaceDetail()
      this.interfaceData = []
    },
    //获取供应商列表
    getProviderList () {
      InterfaceListApi.providerList({
        params: {
          is_page: 0,
          page_size: this.requestParam.page_size,
          page: this.requestParam.page,
          sort_no: this.$route.query.sortId,
        }
      }).then(res => {
        // console.log(res, '供应商列表');
        if (res.code === 0) {
          this.providerList = res.data.list;
          this.providerList.map((item) => {
            this.interfaceMap[item.access_id] = item
          })
        }
      },
        err => {
          console.log(err);
        }
      );
    },
    //返回按钮
    back () {
      this.$router.go(-1)
    },
    //点击详情
    getDetail (row) {
      this.project_id = row.project_id
      this.interfaceDetail()
    },
    //获取项目详情
    interfaceDetail () {
      let param = { project_id: this.project_id, ...this.detailPage }
      this.interfaceDetailDialog = true
      InterfaceListApi.getInterfaceListDetails({
        params: param
      }).then(
        res => {
          // console.log(res);
          if (res.code === 0) {
            this.setAbnormalData = res.data;
          }
        },
        err => {
          console.log(err);
        }
      );
    },
    //详情分页
    detailchange (page) {
      // console.log(`当前页: ${page}`);
      this.detailPage.page = page;
      this.interfaceDetail();
    },
    //保存供应商设置
    saveProvider () {
      this.$refs.setProviderform.validate((valid) => {
        if (valid) {
          let param = { access_id: this.access_id, ...this.interfaceData }
          InterfaceListApi.getProvider({
            data: param
          }).then(res => {
            if (res.code === 0) {
              this.$message.success('设置成功')
              this.setProviderDialog = false
            }
          })
        } else {
          return false;
        }
      })
    },
    ProviderDialog () {
      this.setProviderDialog = false
      this.interfaceData.remark = ''
      this.$refs.setProviderform.resetFields()
    },
    //获取阈值
    getAbnormalVal () {
      InterfaceListApi.getThreshold({
        params: {
          sort_no: this.$route.query.sortId,
        }
      }).then(
        res => {
          // console.log(res, '阈值');
          if (res.code === 0) {
            this.abnormalVal = res.data.threshold;
          }
        },
        err => {
          console.log(err);
        }
      );
    },
    //保存异常阈值设置
    saveAbnormal () {
      if (!this.abnormalVal) return
      InterfaceListApi.getAbnormal({
        params: {
          sort_no: this.$route.query.sortId,
          threshold: this.abnormalVal
        }
      }).then(res => {
        if (res.code === 0) {
          this.$message.success('设置成功')
          this.setAbnormalDialog = false
        }
      })
    },
    //异常阈值排序
    sortAbnormal () { },
    //点击接口显示异常信息
    apiDetail (row) {
      this.abnormalType = row.type
      this.uniqueId = row.unique_id
      this.showAbnormal = true
      this.getApimessage();
    },
    getApimessage () {
      let param = { unique_id: this.uniqueId, ...this.apiPage }
      InterfaceListApi.abnormalApi({
        params: param
      }).then(res => {
        // console.log(res, '信息')
        if (res.code === 0) {
          this.abnormalList = res.data
        }
      })
    },
    //api异常信息分页
    apiChange (page) {
      // console.log(`当前页: ${val}`);
      this.apiPage.page = page;
      this.getApimessage();
    }
  },
}
</script>
<style lang="scss" scoped>
.interfaceDetail {
  padding: 30px;
  .apiList {
    color: #409eff;
    cursor: pointer;
  }
  .interface-title {
    font-size: 15px;
    font-weight: bold;
  }
  .button-flex {
    padding: 20px 0px;
  }
  .abnormal-con {
    width: 80%;
    text-align: center;
    .abnormal-input {
      width: 60px;
    }
  }
  .abnormalMessage {
    padding: 40px 20px;
    .message-nav {
      display: flex;
      font-size: 15px;
      font-weight: 700;
      color: #409eff;
    }
    span {
      display: block;
    }
    .line {
      border-top: 1px dashed #409eff;
      width: 90%;
      margin-top: 10px;
      margin-left: 10px;
    }
    .message-con {
      padding: 10px 0;
    }
    .apiPage {
      text-align: left !important;
    }
  }
}
</style>
